<template>
  <div>
    <ContentWrap :show-border="false">
      <SearchBox
        :queryForm="searchList"
        :showExpland="false"
        :show-export="false"
        @query="handleSearchQuery"
      />
    </ContentWrap>
    <ContentWrap :show-border="false">
      <el-button type="primary">导入物流订单</el-button>
    </ContentWrap>
    <ContentWrap :show-border="false">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="importNum" label="导入数量" width="180" />
        <el-table-column prop="successNum" label="成功数量" width="180" />
        <el-table-column prop="failNum" label="失败数量" width="180" />
        <el-table-column prop="status" label="订单状态" />
        <el-table-column prop="createBy" label="创建者" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作">
          <template #default>
            <el-button link type="primary" size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </ContentWrap>
    <Detail ref="detailRef" />
    <BatchImport ref="batchImportRef" />
  </div>
</template>
<script setup lang="ts">
import type { TradeOrderQueryVO } from '@/api/mall/trade/order'
import Detail from './components/detail.vue'
import BatchImport from './components/batchImport.vue'

const detailRef = ref<InstanceType<typeof Detail> | null>(null)

const batchImportRef = ref<InstanceType<typeof BatchImport> | null>(null)

const searchList: TradeOrderQueryVO[] = [
  {
    label: '创建者',
    code: 'orderNo',
    type: 'input'
  },

  {
    label: '创建时间',
    code: 'orderTime',
    type: 'dateRange'
  }
]
const handleSearchQuery = (val) => {
  /***
   * 搜索框查询条件，目前考虑在查询时 queryParams = {...val,pageNo:1,pageSize:10}
   * */
  console.log(val, 'handleSearchQuery')
}

const tableData = [
  {
    orderNo: '20230201123456789',
    createTime: '2023-02-01 12:34:56',
    importNum: 100,
    successNum: 90,
    failNum: 10,
    status: '已完成',
    createBy: 'admin'
  }
]

/**
 * 显示导入
 */
const handleImport = () => {
  batchImportRef.value?.show()
}
/**
 * 显示导入详情
 */
const handleDetail = () => {
  detailRef.value?.show()
}
</script>
<style lang="scss" scoped></style>
